<template>
   
   <div class="div">
      <pageHeader title="文章列表"></pageHeader>
      <pageSearch>
         <template #input>
            <el-input v-model="state.text" placeholder="输入查询条件" clearable />
         </template>
         <template #button>
            <el-button type="primary" @click="SearchArticle">查 询</el-button>
            <el-button type="primary" @click="addArticle">添 加</el-button>
         </template>
      </pageSearch>

      <el-table :data="state.data" stripe style="width: 100%">
         <el-table-column prop="tag_id" label="ID" width="80" />
         <el-table-column prop="tag_title" label="标题" width="180" />
         <el-table-column  />
         <el-table-column  />
         <el-table-column label="操作">
            <template #default="{ $index, row }">


               <el-button size="small" @click="updateArticle(row)">修 改</el-button>


               <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF"
                  title="是否确定删除?" @confirm="deleteArticle(row)">
                  <template #reference>
                     <el-button size="small" type="danger">删 除</el-button>
                  </template>
               </el-popconfirm>


            </template>
         </el-table-column>
      </el-table>

      <el-pagination @current-change="pagemed" :page-size="2" :pager-count="5" layout="prev, pager, next"
         :total="(<number>state.pagemax * 2)" />



      <el-dialog v-model="state.tagshow" @close="Thepopupcloses" :title="state.tagsfxg==true?'添加':'修改'" width="30%" destroy-on-close center>
         <el-input v-model="state.dataadd.tag_title" placeholder="请输入标签名">
            <template #prepend>{{ state.dataadd.tag_id == undefined ? "暂无" : state.dataadd.tag_id }}</template>
         </el-input>
         <template #footer>
            <span class="dialog-footer">
               <el-button @click="Cancel">取消</el-button>
               <el-button type="primary" @click="Areyousure">
                  确定
               </el-button>
            </span>
         </template>
      </el-dialog>




   </div>
</template>

<script setup  lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
import { onMounted, reactive, toRefs } from "vue";
import http, { format, setItem, getItem } from "@/utils";
import { Row, showToast } from 'vant';

const state: {
   data: {
      tag_id?: number,
      tag_title: string
   }[],
   dataadd: {
      tag_id?: number,
      tag_title?: string
   },
   pagemax?: number,
   tagshow: boolean,
   tagsfxg: boolean,
   pagea?: number,
   text: string,
   bool: boolean
} = reactive({
   data: [{
      tag_title: ""
   }],
   tagshow: false,
   dataadd: {},
   tagsfxg: false,
   text: "",
   bool: true
})

onMounted(async () => {
   more()
})
//查询
const SearchArticle = async () => {
   if (state.text!= "") {
      state.data = await http.taghdqueries({ text: state.text })
      console.log("state.data", state.data)
   }else{
      more()
   }

}

const Thepopupcloses = () => {
   state.dataadd = {}
}

const more = async (page: number = 0) => {
   let dd = (await http.taghdselect({ page }))
   state.data = dd.data
   state.pagemax = dd.pagemax
   console.log("state.data0", state.data)
}
//修改
const updateArticle = (row: any) => {
   state.tagshow = true
   state.dataadd = row
   state.tagsfxg = false
}
//删除
const deleteArticle = async (row: any) => {
   await http.taghddelete(row)
   more((<number>state.pagea - 1))
}
//添加
const addArticle = () => {
   state.tagshow = true
   state.tagsfxg = true
}
//分页
const pagemed = async (val: number) => {
   state.pagea = val
   console.log("val", val)
   state.data = (await http.taghdselect({ page: (val - 1) })).data
}
//取消
const Cancel = () => {
   state.tagshow = false
}
//确定
const Areyousure = async () => {

   if (state.dataadd.tag_title != undefined) {
      if (state.tagsfxg == true) {
         await http.taghdadd({ tag_title: state.dataadd.tag_title })
      } else {

         await http.taghdupdata((<number>state.dataadd))

      }
      more((<number>state.pagea - 1))
      showToast(state.tagsfxg == true ? "发布成功" : "修改成功");
      state.tagshow = false
   } else {
      console.log("sdfgdfs")
   }
}

</script>

<style lang="less" scoped></style>
